<template>
  <div class="x-customer-service" @click="handleToService">
    <span v-if="title">{{ title }}</span>
    <img :src="SvgCustomerService" />
  </div>
</template>

<script lang="ts">
  import { defineComponent, reactive, toRefs } from 'vue'
  import SvgCustomerService from '@/assets/images/svg-customer-service.svg'

  export default defineComponent({
    name: 'XCustomerService',
    props: {
      title: {
        type: String,
        default: '点击咨询，帮您立即找货'
      },
      url: {
        type: String,
        default: 'https://work.weixin.qq.com/kfid/kfcc6ca4b81add698fc'
      }
    },
    setup($props) {
      const $state = reactive({
        ...toRefs($props)
      })

      const handleToService = () => {
        if ($state.url) {
          window.open($state.url)
        }
      }

      return {
        ...toRefs($state),
        SvgCustomerService,
        handleToService
      }
    }
  })
</script>

<style lang="scss">
  .x-customer-service {
    width: 224px;
    height: 76px;
    position: fixed;
    right: 10px;
    bottom: 188px;
    z-index: 3;
    cursor: pointer;
    display: flex;
    align-items: center;
    img {
      width: 70px;
      height: 70px;
    }
    span {
      background: #54de74;
      box-shadow: 0 0 4px rgba(84, 222, 116, 0.5);
      border-radius: 6px;
      color: #fff;
      font-size: 13px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      padding: 0 35px 0 20px;
      white-space: nowrap;
      margin-right: -20px;
    }
  }
</style>
